<#import "/spring.ftl" as spring/>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">

    <title>支付</title>

    <link rel="stylesheet" href="<@spring.url '/css/qrcode-redirect.css'/>"/>

    <script type="text/javascript" src="/vendor/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="<@spring.url '/js/wxpay.js'/>"></script>
    <script>
        <#if showConfirmPage>
            function pay() {
                var couponCode = document.getElementById('coupon-code');
                var cardId = document.getElementById('card-id');
                var amount = document.getElementById('coupon-amount');
                var params = {
                    code: couponCode ? couponCode.value : '',
                    cardId: cardId ? cardId.value : '',
                    amount: amount ? amount.value : '',
                    merchantId:${merchantId}
                };

                $.post("/qrcodes/${hash}/wxprepays/${openId}", params, function(data) {
                    wxJdk.pay(data);
                })
                .fail(function(data) {
                    var object = JSON.parse(data.responseText);
                    alert(object.errorMsg);
                });
            }
        <#else>
            wxJdk.pay('${data}');
        </#if>
    </script>

    <#if allowCard>
        <script type="text/javascript" src="/vendor/jweixin-1.0.0.js"></script>
        <script type="text/javascript" src="/js/wxcard.js"></script>
        <script>
            $(function() {
                wxcard.init(${merchantId});
            });
        </script>
    </#if>
</head>

<body>
<#if showConfirmPage>
    <div class="content-bg"></div>
    <div class="content header">
        <span><img src="<@spring.url '/images/shield.png'/>" alt="checked"/></span>
        ${title}
    </div>
    <div class="content flat-top">
        <div class="field-group">
            <div class="field-name" style="padding-top: 0.675rem">需支付金额</div>
            <div class="field-value"><span id="price" class="price">${amount?string('0.00')}</span>元</div>
        </div>
        <div class="field-group">
            <div class="field-name">订单金额</div>
            <div class="field-value"><span id="order-price" class="order-price">${amount?string('0.00')}</span>元</div>
        </div>
        <div class="field-group">
            <div class="field-name">收款商户</div>
            <div class="field-value">${merchantName}</div>
        </div>
        <#if allowCard>
            <div id = "coupon" class="field-group" onclick="wxcard.list()">
                <input id="coupon-code" name="couponCode" type="hidden"/>
                <input id="card-id" name="cardId" type="hidden"/>
                <input id="coupon-amount" name="couponAmount" type="hidden" value="0"/>

                <div class="field-name">
                    <img class="coupon-icon" src="<@spring.url '/images/wallet.png'/>" alt="coupon"/> 优惠券
                </div>
                <div id="coupon-label" class="field-value">请选择</div>
            </div>
        </#if>

        <div class="field-group last" style="text-align: center">
            <a href="#" class="btn" onclick="pay()">立即支付</a>
        </div>
    </div>
<#else>
    <h2 style="text-align: center; margin-top: 2rem;">支付中...</h2>
</#if>
</body>
</html>